<template>
	<view :style="container_style" style="min-height: 100vh; height: auto !important;">
		<view class="share" @click="make">邀约海报</view>
		<view class="rank" @click="show_rank">邀约排行</view>

		<view class="top"><img :src="top_img" class="top-img" style="width: 100%;" /></view>
		<view class="main-video">
			<video
				:src="main_video"
				x5-video-player-type="h5-page"
				controls
				:poster="main_video_cover"
				loop="true"
				autoplay="true"
				:show-fullscreen-btn="false"
				:id="'videomain'"
				@play="videoPlayHandle('videomain')"
			></video>
		</view>

		<view class="enter-btn">
			<block v-if="need_pay == 1">
			<button class="enter-btn-con" @click="show_baoming" v-if="staff_info['enter'] == 0">立即报名</button>
			<!-- <button class="enter-btn-con" v-else @click="fission">邀约客户</button> -->
			<button class="enter-btn-con" v-else-if="extra_field_other == ''" @click="go_to_zhibo">{{before_authorize_btn}}</button>
			
			<button class="enter-btn-con" v-else @click="go_to_link">{{after_authorize_btn}}</button>
			</block>
			<block v-else>
				<button class="enter-btn-con" @click="show_baoming" v-if="staff_info['enter'] == 0">立即报名</button>
				<!-- <button class="enter-btn-con" v-else @click="fission">邀约客户</button> -->
				<button class="enter-btn-con" style="background-color: #cccccc; color: #FFFFFF;" v-else-if="(staff_info['enter'] == 1)&&(staff_info['is_check'] != 1)">等待审核</button>
				<button class="enter-btn-con" v-else-if="extra_field_other == ''" @click="go_to_zhibo">{{before_authorize_btn}}</button>
				
				<button class="enter-btn-con" v-else @click="go_to_link">{{after_authorize_btn}}</button>
			</block>
			<block v-if="staff_info['enter'] == 1">
				<view style="text-align: center; margin-top: 20rpx;" v-if="staff_info.ewm_url">
				<image :src="staff_info.ewm_url" style="width: 200rpx; height: 200rpx;" mode="aspectFill"></image>
				<view style="color: #FFFFFF;font-size: 26rpx;" v-html="enter_success_tip">
			
				</view>
				</view>
			</block>
			
		</view>
		<view class="enter-title">
			已有
			<span class="enter-count">{{ enter_count }}</span>
			人报名成功
		</view>
		<view class="enter-list">
			<block v-for="(item, index) in enter_list" :key="index" >
				<image class="enter-head" :src="item.headimgurl" v-if="index<22"></image>
				
				<image class="enter-head" :src="item.headimgurl" style="margin-left: -50rpx;" v-else></image>
				
			</block>
			
		</view>

		<block v-for="(item, index) in video_list" :key="index">
			<view class="video-list">
				<view class="video-list-title" @click="go_to_video(item.id)">{{ item.title }}</view>
				<view class="video-list-con" @click="go_to_video(item.id)">
					<video
						:src="item.video_url"
						x5-video-player-type="h5-page"
						controls
						:poster="item.video_cover"
						loop="true"
						autoplay="true"
						:show-fullscreen-btn="false"
						:id="'video'+index" 
						@play="videoPlayHandle('video'+index)"
					><!-- poster="https://jbh.4coder.org.cn/web/video_bg.jpg" --></video>
				</view>
			</view>
		</block>

		<view class="bottom"><img :src="bottom_img" class="top-img" style="width: 100%;" /></view>

		<view class="foot">
			<!-- <view>主办单位：赣州唯宅汇科技有限公司（易卖通）</view>
			<view>协办工厂/品牌：可可木语、布匠坊、亿唯诺、伊尔雅居</view> -->
			<view>唯宅播提供技术支持</view>
		</view>

		<view class="qrimg"><tki-qrcode ref="qrcode" :val="code_value" :show="show" :size="size" @result="qrR" /></view>
		
		<openAlert ref="fission">
			<view class="fission_content">
				<view style="font-size: 45rpx;font-weight: bold;margin: auto;">您已成功报名！</view>
				<scroll-view scroll-y="true" class="qrcode" style="padding-bottom: 10rpx;">
					<view style="border-bottom: 1rpx solid #e8e8e8;padding-bottom: 10rpx;">
						<image src="../../static/zhh.jpg" style="width: 200rpx;height: 200rpx;"></image>
						<view>关注唯宅汇公众号</view>
						<view>家博会启动提醒,精彩不容错过！</view>
					</view>
					<view class="qrcode-video">
						<view>建材联盟营销新模式</view>
						
					</view>
					<view class="content-title">
						<view class="content-view">
							<view class="title-name">邀约成功一人即可获得听课资格</view>
							<view class="download">
				
								<view v-if="child_invite_info.length != 0" style="display: flex;flex-direction: column;align-items: center;">
				
									<view class="invite-success">
										<image class="image-header" :src="this.child_invite_info.headimgurl"></image>
										<view class="success">你已邀约成功！</view>
										<view class="invite-share" @click="make">立即去邀约</view>
									</view>
									<view>
										<image src="../../static/renqrcode.png" style="width: 300rpx;height: 300rpx;"></image>
										<view>恭喜您获得听课资格，请长按识别进入听课群</view>
									</view>
								</view>
								<view v-else style="display: flex;flex-direction: column;align-items: center;margin-bottom: 40rpx;">
				
									<view class="invite-success">
										<view class="invite-fail">
											<image src="../../static/profile.png"></image>
											<view>待邀</view>
										</view>
										<view class="success">只需邀约一人！</view>
										<view class="invite-success-share" @click="make">立即去邀约</view>
									</view>
									<view style="display: flex;flex-direction: column;align-items: center;">
										<view style="background-color: rgba(0,0,0,0.8);z-index: 11;position: absolute;height: 400rpx;width: 600rpx;color: white;margin: auto;line-height: 300rpx;font-size: 35rpx;">邀约成功一人即可解锁</view>
										<image src="../../static/renqrcode.png" style="width: 300rpx;height: 300rpx;"></image>
										<view>恭喜您获得听课资格,请长按识别进入听课群</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</openAlert>

		<openAlert ref="haibao" :BgColor="BgColor" closeBtn>
			<view class="haibao-open">
				<view style="color: white;font-size: 35rpx;position: absolute;width: 100%;text-align: center;">长按图片,分享好友</view>
				<image :src="haibao_url" style="height: 950rpx;width: 560rpx;border-radius: 20rpx;margin-top: 50rpx;"></image>
			</view>
		</openAlert>

		<enter ref="baoming" @change="changeBtnStatus" :price="price" :activity_id="activity_id" :pid="pid" :staff_id="staff_id" :extra_field="extra_field" :last_enter_info="last_enter_info" :need_pay="need_pay" :is_history="is_history" v-if="show_enter" ></enter>
		<openAlert ref="rank" closeBtn CloseImage="close-position">
			<view class="invite-list">
				<view class="invite-title">邀约排行榜</view>

				<view class="invite-head">
					<view class="rank-text" style="color: #333;">排名</view>
					<view class="rank-title" style="color: #333;">公司名称</view>
					<view class="rank-count" style="color: #333;">邀约数</view>
				</view>
				<scroll-view style="height: 650rpx;" scroll-y>
				<view class="invite-body" v-for="(item,index) in invite_rank" :key="index">
					<view class="rank-text" v-if="index < 3"><image mode="aspectFit" style="height: 50rpx;width: 50rpx;" :src="'../../static/paihang_'+index+'.png'"></image></view>
					<view class="rank-text" v-else>{{index+1}}</view>
					<view class="rank-title">{{item.name}}</view>
					<view class="rank-count">{{item.invite_count}}</view>
				</view>
				</scroll-view>
			</view>
		</openAlert>
		
		<openAlert ref="enterlist" closeBtn CloseImage="close-position">
			<radio-group>
			<view class="enterlist">
				<h2 style="text-align: center;">选择历史报名</h2>
			<scroll-view style="height: 600rpx;" scroll-y>
			<view v-for="(item,index) in last_enter_list" :key="index" class="enterlist-li" @click="selectEnter(item.id)">
				<radio value="item.id" :checked="item.id == select_enter_id"/>{{item.name}}{{item.tel}}
				<span v-for="(item2,index2) in item.extra_field_config" :key="index2" style="padding-left: 20rpx;">
					{{item2.toast}}:{{item2.value}}
				</span>
			</view>
			</scroll-view>
			<button @click="bm_once" type="primary" style="width: 400rpx;">新增报名</button>
			</view>
			</radio-group>
		</openAlert>
		
	</view>
</template>

<script>
require('../../components/poster/poster_maker.js');
import tkiQrcode from '@/components/tki-qrcode/tki-qrcode.vue';
import openAlert from '@/components/open-alert/open-alert';
import enter from '@/components/enter';
export default {
	components: {
		tkiQrcode,
		openAlert,
		enter
	},
	data() {
		return {
			container_style: '',
			top_img: '',
			bottom_img: '',
			main_video_cover:'',
			main_video: '',
			enter_count: 2,
			enter_list: [],
			video_list: [],
			activity_id: 0,
			staff_info: [],
			code_value: '',
			size: 400,
			show: false,
			haibao_url: '',
			BgColor: '#838383',
			staff_id: 0,
			pid: 0,
			haibao_title: '',
			invite_list_info: [],
			invite_rank:[],
			url:'',
			company_name:'',
			child_invite_info:[],
			scrollH: '',
			extra_field:'',
			show_enter:false,
			price: 0,
			sharemaintitle: '',
			sharetitle: '',
			shareimage: '',
			link: '',
			haibao_id:0,
			extra_field_other:"",
			goto_link:'',
			title: '',
			before_authorize_btn:'',
			after_authorize_btn:'',
			need_pay:1,
			enter_success_tip:'',
			last_enter_list:[],
			last_enter_info:{
				name:'',
				tel:'',
				extra_field_value:''
			},
			enter_history:0,
			select_enter_id:0,
			is_history:0
		};
	},
	onLoad(option) {
		if (option.activity_id == undefined) {
			option.activity_id = 80;
		} else {
			option.activity_id = parseInt(option.activity_id);
		}

		if (option.staff_id == undefined) {
			option.staff_id = 0;
		} else {
			option.staff_id = parseInt(option.staff_id);
		}
		if (option.pid == undefined) {
			option.pid = 0;
		} else {
			option.pid = parseInt(option.pid);
		}
		this.$comm.appLogin(user_info=>{
			this.set_config(option.activity_id, option.staff_id);
		})
		
		
		this.staff_id = option.staff_id;
		
		this.pid = option.pid;
		if(option.msg){
			uni.showToast({
				title:option.msg,
				icon:'none'
			})
		}
	},
	methods: {	
		go_to_video(id){
			uni.navigateTo({
				url:'/pages/index/video?video_id='+id+'&staff_id='+this.staff_id+'&pid='+this.pid
			})
		},
		//生成海报
		qrR(e) {
			let haibao_title = '';
			let staff_info = this.staff_info;
			if (staff_info['fac_name']) {
				haibao_title = staff_info['staff_name'] + '(' + staff_info['fac_name'] + ')';
			} else {
				haibao_title = staff_info['staff_name'];
			}
			postMaker(this.haibao_id, [e, haibao_title], 500, url => {
				this.haibao_url = url;
				this.$refs.haibao.Show();
			});
		},
		//分享
		share() {
			if (this.sharemaintitle == "" || null) this.sharemaintitle = '易卖通首届线上家博会';
			if (this.sharetitle == "" || null) this.sharetitle = '海量新品爆品,产品物流空前优惠,不容错过';
			if (this.shareimage == "" || null) this.shareimage = 'https://jbh.4coder.org.cn/web/share_img.jpg';
			this.$comm.setShare({
				title: this.sharemaintitle,
				desc: this.company_name + this.sharetitle,
				imgUrl: this.shareimage,
				link: this.url
			})
		},
		set_config(activity_id, staff_id) {
			this.$comm.request({
				url: 'api/activity_index',
				method: 'GET',
				data: {
					activity_id: activity_id,
					staff_id: staff_id
				},
				success: res => {
					if (res.data.code != 200) {
						uni.showToast({
							title: res.data.msg
						});
						return false;
					}
					let result = res.data.result;
					this.activity_id = activity_id;
					let staff_info = result.staff_info;
					
					this.staff_info = staff_info;
					this.enter_count = result.invite_list_info['invite_count'];
					this.enter_list = result.invite_list_info['invite_list'];

					if (this.container_style) {
						this.container_style += ';background-color:' + result.background;
					} else {
						this.container_style = 'background-color:' + result.background;
					}
					this.top_img = result.top_img;
					this.main_video = result.main_video;
					this.bottom_img = result.bottom_img;
					this.main_video_cover = result.main_video_cover;
					this.price = result.pay_price;
					this.sharetitle = result.share_content
					this.sharemaintitle = result.share_title
					this.shareimage = result.share_img
					this.link = result.link
					this.goto_link = result.goto_link
					this.haibao_id = result.haibao_id
					this.extra_field_other = result.extra_field_other

					this.video_list = result.activity_video_list;
					this.extra_field = result.extra_field_config
					this.show_enter = true
					this.before_authorize_btn = result.before_authorize_btn
					this.after_authorize_btn = result.after_authorize_btn
					this.need_pay = result.need_pay
					this.enter_success_tip = result.enter_success_tip
					this.enter_history = result.enter_history
					//当前用户历史报名数据列表
					this.last_enter_list = result.enter_list
					let share_url =
						this.$comm.app_config.share_url +
						'/index/index?activity_id=' +
						this.activity_id +
						'&staff_id=' +
						this.staff_info['staff_id'] +
						'&pid=' +
						this.staff_info['pid'];
					this.url = share_url;
					this.company_name = this.staff_info['fac_name'];
					this.share()
					setTimeout(function(){uni.setNavigationBarTitle({
						title:result.title
					})},1000)
				}
			});
		},

		//制作二维码
		make() {
			if (this.haibao_url) {
				this.$refs.haibao.Show();
			} else {
				
				this.code_value = this.url;
				setTimeout(() => {
					this.$refs.qrcode._makeCode();
				}, 200);
			}
			
			this.$refs.fission.Close()
		},

		show_baoming() {
			if(this.enter_history==1 && (this.last_enter_list.length>0)){
				this.$refs.enterlist.Show()
			}else{
				this.$refs.baoming.open();
			}
		},
		selectEnter(id){
			this.select_enter_id = id
			for(let i=0;i<this.last_enter_list.length;i++){
				if(this.last_enter_list[i].id == id){
					this.last_enter_info = this.last_enter_list[i]
					break;
				}
			}
			this.is_history = 1
			this.$refs.enterlist.Close()
			this.$refs.baoming.open();			
		},
		bm_once(){
			this.last_enter_info = {
				name:'',
				tel:'',
				extra_field_value:''
			};
			this.is_history = 0
			this.select_enter_id = 0
			this.$refs.enterlist.Close()
			this.$refs.baoming.open();
		},
		changeBtnStatus() {
			this.staff_info['enter'] = 1;
			this.$comm.request({
				url: 'api/activity_invite_list',
				method: 'GET',
				data: {
					activity_id: this.activity_id
				},
				success: res => {
					this.enter_count = res.data.result.invite_count;
					this.enter_list = res.data.result.invite_list;
				}
			});
			let activity_id = this.activity_id
			let staff_id = this.staff_id
			this.set_config(activity_id,staff_id)
		},
		show_rank() {
			this.$comm.request({
				url: 'api/activity_invite_rank',
				method: 'GET',
				data: {
					activity_id: this.activity_id
				},
				success: res => {
					this.invite_rank = res.data.result
					this.$refs.rank.Show();
				}
			});
			
		},
		fission(){
			this.$comm.request({
				url: 'api/has_invite',
				method: 'GET',
				data: {
					activity_id: this.activity_id
				},
				success: res => {
					this.child_invite_info = res.data.result
					this.$refs.fission.Show();
				}
			});
			
		},
		//视频播放
		videoPlayHandle(id) {
			let newVideo = uni.createVideoContext(id);
			if (!this.video) {
				this.video = newVideo;
				this.video.play();
				return
			}
			if (this.video.id !== newVideo.id) {
				newVideo.play();
				this.video.pause();
				this.video = newVideo;
			}
		},
		go_to_zhibo(){
			let token = uni.getStorageSync('user_token');
			let activity_id = this.activity_id
			let url = this.$comm.app_config.share_url +'/index/index?activity_id=' + activity_id
			//console.log(this.link + 'back_url='+encodeURIComponent(url)+'&token='+token+"&activity_id="+activity_id)
			window.location.href = this.link + 'back_url='+encodeURIComponent(url)+'&token='+token+"&activity_id="+activity_id
			
		},
		go_to_link(){
			window.location.href = this.goto_link
		},
		
	}
};
</script>

<style lang="scss" scoped>

.top {
	position: relative;
}
.top-img {
	position: relative;
}
.container_style {
	height: 100%;
}
.share {
	width: 160rpx;
	line-height: 50rpx;
	background-color: #2c405a;
	position: fixed;
	right: 0;
	top: 80rpx;
	border-radius: 25rpx 0 0 25rpx;
	color: #ffffff;
	text-align: center;
	font-size: 28rpx;
	z-index: 100;
}
.rank {
	width: 160rpx;
	line-height: 50rpx;
	font-size: 28rpx;
	background-color: #2c405a;
	position: fixed;
	right: 0;
	top: 155rpx;
	border-radius: 25rpx 0 0 25rpx;
	color: #ffffff;
	text-align: center;
	z-index: 2;
}
.main-video {
	text-align: center;
}
.main-video video {
	width: 710rpx;
	height: 400rpx;
}
.video-list-con video{
	width: 710rpx;
	height: 400rpx;
}
.enter-btn-con {
	width: 440rpx;
	background-color: #fff700;
	color: #495ffe;
	border-radius: 50rpx;
	margin-top: 30rpx;
	font-weight: bold;
	font-size: 35rpx;
}
.enter-btn-con:after {
	border: none;
}
.enter-title {
	text-align: center;
	color: #ffffff;
	font-size: 30rpx;
	margin-top: 20rpx;
}
.enter-head {
	width: 80rpx;
	height: 80rpx;
	border-radius: 50%;
}
.enter-count {
	color: #f5eb25;
}
.enter-list {
	padding: 0 20rpx;
	height: 390rpx;
	margin-top: 30rpx;
}

.enter-list image {
	margin-left: 20rpx;
	margin-top: 10rpx;
	display: inline-block;
}
.video-list {
	margin-top: 30rpx;
	text-align: center;
}
.video-list video {
	width: 710rpx;
}
.video-list-title {
	font-size: 40rpx;
	color: #ffffff;
	margin-bottom: 10rpx;
}
.foot {
	border-top: 1px solid #bbbbbb;
	line-height: 50rpx;
	padding-top: 20rpx;
	margin-bottom: 20rpx;
	text-align: center;
	font-size: 28rpx;
	color: #ffffff;
}
.haibao-open {
	height: 1000rpx;
}
.qrimg {
	height: 0;
	overflow: hidden;
}
.baoming-form {
	width: 600rpx;
	height: 500rpx;
	background-color: #ffffff;
	border-radius: 5rpx;
}
.invite-head {
	display: flex;
	flex-direction: row;
	justify-content:space-between;
	font-weight: bold;
	font-size: 28rpx;
	margin-top: 20rpx;
}
.invite-body {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	font-size: 30rpx;
	line-height: 60rpx;
	margin-top: 20rpx;
}
.invite-title {
	font-weight: bold;
	font-size: 38rpx;
	text-align: center;
	color: rgb(255, 147, 24);
}
.invite-content {
	margin-top: 20rpx;
}
.invite-list {
	width: 650rpx;
	height: 800rpx;
	background-color: #ffffff;
	border-radius: 20rpx;
	padding: 20rpx;
}
.rank-text{
	width: 80rpx;
	text-align: center;
	color: #808080;
}
.rank-title{
	width: 380rpx;
	text-align: center;
	color: #808080;
}
.rank-count{
	width: 140rpx;
	text-align: center;
	color: rgb(253, 95, 30);
}

.fission_content{
	line-height: 50rpx;
	width: 700rpx;
	background-color: #FFFFFF;
	padding: 20rpx;
	text-align: center;
}

.enterlist{
	width: 650rpx;
	height: 800rpx;
	background-color: #FFFFFF;
	padding: 20rpx;
	font-size: 26rpx;
}
.enterlist-li{
	height: 80rpx;
	line-height: 40rpx;
	margin-top: 40rpx;
}

.qrcode {
		display: flex;
		flex-direction: column;
		align-items: center;
		background-color: white;
		// padding-top: 20rpx;
		border-radius: 20rpx;
		width: 650rpx;
		// padding-bottom: 50rpx;
		height: 1100rpx;

		view {
			font-size: 30upx;
			text-align: center;
		}

		.success-sign {
			background-color: #22ac38;
			width: 400rpx;
			color: white;
			margin: auto;
			padding: 10rpx;
			border-radius: 50rpx;
		}

		.qrcode-text {
			color: black;
			font-size: 35rpx;
			font-weight: bold;

		}

		.qrcode-video {
			height: 360rpx;
			width: 600rpx;
			// margin-top: 0rpx;
			margin: 20rpx auto;

			view {
				font-size: 35rpx;
				font-weight: bold;
				margin: 10rpx 0;
			}

			video {
				height: 100%;
				width: 100%;
				object-fit: fill
			}

		}

		.content-title {
			display: flex;
			align-items: center;
			width: 100%;
			justify-content: space-around;
			margin-top: 70rpx;
			flex-direction: column;

			.content-view {
				display: flex;
				flex-direction: column;
				align-items: center;

				.title-name {
					font-size: 30rpx;
				}

				.download {
					text-align: center;

					.image-header {
						height: 80rpx;
						width: 80rpx;
						border-radius: 50rpx;
					}

					.invite-success {
						display: flex;
						align-items: center;
						// margin-left: 50rpx;
						justify-content: space-between;
					}

					.success {
						color: #495ffe;
						margin-top: 10rpx;
					}

					.invite-share {
						background-color: #007AFF;
						color: white;
						padding: 10rpx 20rpx;
						border-radius: 50rpx;
						margin: 10rpx 0;
					}

					.invite-fail {
						line-height: 30rpx;
						height: 80rpx;
						width: 80rpx;
						border-radius: 40rpx;
						background-color: rgba(0, 0, 0, 0.3);
						margin: auto;

						image {
							height: 40rpx;
							width: 40rpx;
							
						}

						view {
							font-size: 0.5em;
						}

					}

					.invite-success-share {
						background-color: #da0000;
						color: white;
						font-weight: bold;
						padding: 10rpx;
						border-radius: 50rpx;
						margin: 20rpx 0;
						font-size: 25rpx;
						padding: 12rpx 20rpx;
					}

					.download-view {
						width: 80%;
						color: white;
						padding: 10rpx;
						border-radius: 30rpx;
						background-color: #22ac38;
						margin-top: 10rpx;
					}

					.download-fail {
						border: 1rpx solid #a0a0a0;
						color: #a0a0a0;
						margin-top: 10rpx;

						padding: 10rpx 80rpx;
						border-radius: 30rpx;
						background-color: white;

					}
				}
			}
		}

		.live {
			display: flex;
			flex-direction: column;
			align-items: center;
			// margin-top: 20rpx;


			.live-content {
				display: flex;
				flex-direction: column;
				align-items: center;
				// margin-top: 70rpx;
				margin-bottom: 50rpx;

				image {
					width: 330rpx;
					height: 110rpx;
					margin: 40rpx;
				}

				.live-text {
					width: 670rpx;
					display: flex;
					flex-direction: column;
					align-items: flex-start;


					.live-two {
						display: flex;
						align-items: center;
						margin-top: 5rpx;

					}

					.black {
						height: 15rpx;
						width: 15rpx;
						background-color: black;
						border-radius: 50rpx;
						margin-right: 10rpx;
					}
				}

			}
		}
	}

</style>
